<template>
  <div>
    <div id="container" ref="container"></div>
    <div id="markerInfo" ref="markerInfo"></div>
    <div id="layerChoose" ref="layerChoose"></div>
    <div id="toolsDraw" ref="toolsDraw">
      <div class="toolItem" id="drawStart">新建</div>
      <div class="toolItem" id="drawEdit">编辑</div>
      <div class="toolItem" id="drawPoint">坐标</div>
    </div>
  </div>
</template>
  
<script>
// import { ref } from 'vue';
import { adbound } from "@/utils/map/MapAdBound.js";
import { adlabel } from "@/utils/map/MapAdLabel.js";
import { MapMark } from "@/utils/map/MapMark.js";
import { samplePoints, sampleLine } from "@/utils/map/MapSample.js";
import { ClusterBubble } from "@/utils/map/MapCluster.js";

export default {
  props: {
    lat: {
      //中心点纬度
      type: Number,
      required: false,
      default: 28.679932,
    },
    lng: {
      //中心点经度
      type: Number,
      required: false,
      default: 115.851456,
    },
    zoom: {
      //地图级别
      type: Number,
      required: false,
      default: 11,
    },
    dark: {
      //是否深色模式，默认false为浅色模式
      type: Boolean,
      required: false,
      default: false,
    },
    pitch: {
      //俯仰角，0为2D模式，其他值为3D模式
      type: Number,
      required: false,
      default: 0,
    },
    callback: {
      //父组件的回调函数，在initMap之后执行
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      apikey: "OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77",
      map: null, // 地图对象的引用
      mapconfig: {
        rotation: 0, //设置地图旋转角度
      },
      control: {
        // 三个基本控件对象的引用
        zoom: null,
        scale: null,
        rotation: null,
      },
      markerCluster: null, // 点聚合图层
      customLayer:[], // 自定义图层 id, name, layer
      markerStyle: {
        // 图形标记样式
        defaultMk: null,
        whiteMk: null,
        blueMk: null,
        redMk: null,
        startMk: null,
        endMk: null,
      },
      labelStyle: {
        // 文本标记样式
        defaultTxt: null,
        whiteTxt: null,
      },
      drawLayer: null, // 绘制图层
      drawPolygon: null, // 多边形图层
    };
  },
  created(){
    window.layerVisible=this.layerVisible;
  },
  mounted() {
    this.loadMap(this.apikey);
  },
  methods: {
    loadMap(key) {
      // 异步加载地图
      // var mapscript = document.createElement("script");
      // mapscript.type = "text/javascript";
      // mapscript.async = true;
      // mapscript.src = "https://map.qq.com/api/gljs?v=1.exp&libraries=visualization&key=" + key;
      // document.head.appendChild(mapscript);

      // mapscript.onload = () => {
      this.initMap();
      this.initStyles();
      // console.log("callback", this.$props.callback)
      if (this.$props.callback) {
        this.$emit("callback", this.map);
      }
      // };
    },
    initMap() {
      // 创建地图
      let mapstyle = "style0";
      // console.log(this.$props);
      if (this.$props.dark) {
        mapstyle = "style1";
      }

      this.map = new TMap.Map(this.$refs.container, {
        center: new TMap.LatLng(this.$props.lat, this.$props.lng),
        zoom: this.$props.zoom,
        mapStyleId: mapstyle,
        pitch: this.$props.pitch,
        rotation: this.mapconfig.rotation,
        baseMap: {
          type: "vector",
          // features: ['base', 'building2d', 'building3d', 'point', 'label']
        },
      });

      this.control.zoom = this.map.getControl(
        TMap.constants.DEFAULT_CONTROL_ID.ZOOM
      );
      this.control.scale = this.map.getControl(
        TMap.constants.DEFAULT_CONTROL_ID.SCALE
      );
      this.control.rotation = this.map.getControl(
        TMap.constants.DEFAULT_CONTROL_ID.ROTATION
      );

      this.hideControl("zoom");
      this.hideControl("scale");
      this.hideControl("rotation");

      this.map.on("click", function (evt) {
        var lat = evt.latLng.getLat().toFixed(6);
        var lng = evt.latLng.getLng().toFixed(6);
        console.log("{lat: " + lat + ", lng: " + lng + "}");
      });
    },
    initStyles() {
      // 初始化各种样式
      this.markerStyle.defaultMk = new TMap.MarkerStyle({
        width: 20,
        height: 30,
        anchor: { x: 10, y: 30 },
      });

      this.markerStyle.startMk = new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png",
      });

      this.markerStyle.endMk = new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png",
      });

      this.labelStyle.defaultTxt = new TMap.LabelStyle({
        color: "#ffffff",
        strokeColor: "#000000",
        strokeWidth: 1,
        size: 20,
        offset: { x: 0, y: 0 },
        angle: 0,
        alignment: "center",
        verticalAlignment: "middle",
      });
    },
    getMap() {
      // 返回地图对象用于自定义编程
      return this.map;
    },
    setDark(isdark) {
      // 设置是否为深色主题
      let mapStyleId = "style0";
      if (isdark) {
        mapStyleId = "style1";
      }
      this.map.setMapStyleId(mapStyleId);
    },
    setZoom(lev) {
      // 设置缩放级别 全省：8，全市：10
      this.map.setZoom(lev);
    },
    getZoom() {
      // 获取缩放级别
      return this.map.getZoom();
    },
    setMaxZoom(lev) {
      // 设置最大缩放级别 
      this.map.setMaxZoom(lev);
    },
    setMinZoom(lev) {
      // 设置最小缩放级别 
      this.map.setMinZoom(lev);
    },
    setBoundary(lat_sw, lng_sw, lat_ne, lng_ne){
      // 设置矩形边界范围
      // 参数依次是 西南角纬度，西南角经度，东北角纬度，东北角经度
      this.map.setBoundary(new TMap.LatLngBounds(new TMap.LatLng(lat_sw, lng_sw), new TMap.LatLng(lat_ne, lng_ne) ));
    },
    setCenter(lat, lng) {
      // 设置地图中心点
      this.map.setCenter({ lat: lat, lng: lng });
    },
    showControl(cid) {
      // 显示基础控件
      // zoom  缩放加减
      // scale 比例尺
      // rotation 旋转
      if (cid == "zoom") {
        this.map.addControl(this.control.zoom);
      } else if (cid == "scale") {
        this.map.addControl(this.control.scale);
      } else if (cid == "rotation") {
        this.map.addControl(this.control.rotation);
      } else {
        console.log("未知控件类型", cid);
      }
    },
    hideControl(cid) {
      // 隐藏基础控件
      // zoom  缩放加减
      // scale 比例尺
      // rotation 旋转
      if (cid == "zoom") {
        this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
      } else if (cid == "scale") {
        this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
      } else if (cid == "rotation") {
        this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
      } else {
        console.log("未知控件类型", cid);
      }
    },
    setBaseMap(baseMap) {
      // 修改地图类型
      // vector 矢量图，默认, 道路及底面（base）、建筑物（building3d）、建筑物平面(building2d)、poi文字（point）、道路文字（label）、道路箭头（arrow）
      // satellite 卫星图, 卫星影像图（base）、路网图（road）
      // traffic 路况图, 路况线网（base）、流动粒子（flow）
      // e.g. baseMap: { type: 'vector',	features: ['base', 'building2d', 'building3d', 'point', 'label']  }
      this.map.setBaseMap(baseMap);
    },
    layerFind(id){
      // 根据id获取自定义图层
      let re=null;
      this.customLayer.forEach(item => {
        if (item.id === id) {
          re=item;
        }
      });
      return re;
    },
    layerAdd(aid, aname, alayer){
      // 增加自定义图层，如果id重复会覆盖
      this.layerRemove(aid); // 先删掉id相同的
      this.customLayer.push({id: aid, name: aname, layer: alayer});
    },
    layerRemove(idToRemove){
      // 删除自定义图层
      for (let i = 0; i < this.customLayer.length; i++) {
        if (this.customLayer[i].id === idToRemove) {
          this.customLayer.splice(i, 1);
          break;
        }
      }
    },
    layerShow(id){
      // 显示自定义图层
      this.layerVisible(id, true);
    },
    layerHide(id){
      // 隐藏自定义图层
      this.layerVisible(id, false);
    },
    layerVisible(id, vis){
      // 隐藏自定义图层
      let layjson=this.layerFind(id);
      if(layjson!=null && layjson.layer!=null){
        layjson.layer.setVisible(vis);
      }
    },
    addLayerChoose(chooseOption){
      // 增加图层选择控件 chooseOption:[{id, name, checked}]      
      let html="";
      for(let x=0; x<chooseOption.length; x++){
        let item=chooseOption[x];
        html+="<li><input type='checkbox' onclick='layerVisible(\""+item.id+"\", this.checked)'"
        if(item.checked){
          html+=" checked='checked'";
        }
        html+="/>";
        html+=" "+item.name+"</li>";
      }
      // console.log(html);
      this.$refs.layerChoose.innerHTML=html;
      this.$refs.layerChoose.style.display="block";
    },
    addMarker() {
      // 增加点标记（不聚合）
      let geoPoints = [
        {
          id: "mk1",
          position: new TMap.LatLng(28.695677, 115.92265),
          properties: {
            title: "普赛科技",
            addr: "洪都大道865号",
            tel: "18912374554",
          },
        },
        {
          id: "mk2",
          position: new TMap.LatLng(28.720086, 115.885716),
          properties: {
            title: "南昌市司法局",
            addr: "祥瑞路999号",
            tel: "18912374554",
          },
        },
        {
          id: "mk3",
          position: new TMap.LatLng(28.683927, 115.938221),
          properties: {
            title: "南昌大学",
            addr: "南京东路423号",
            tel: "112312637123",
          },
        },
        {
          id: "mk4",
          position: new TMap.LatLng(28.672878, 115.939138),
          properties: {
            title: "恒茂梦时代广场",
            addr: "上海路3133号",
            tel: "12345345345",
          },
        },
        {
          id: "mk5",
          position: new TMap.LatLng(28.664277, 115.936713),
          properties: {
            title: "东方赛纳",
            addr: "顺外路9898号",
            tel: "417832123123",
          },
        },
        {
          id: "mk6",
          position: new TMap.LatLng(28.64278, 115.916861),
          properties: {
            title: "test",
            addr: "aaaa",
            tel: "bbbb",
          },
        },
      ];

      let markerLayer = new TMap.MultiMarker({
        id: "defaultMarkerLayer",
        map: this.map,
        styles: {
          default: this.markerStyle.defaultMk,
        },
        geometries: geoPoints,
      });
      this.layerAdd("defaultMarkerLayer", "默认点标记层", markerLayer);
      markerLayer.on("click", this.markerClick);
    },
    addMarkerCluster(points) {
      // 增加点标记（聚合）
      let geoPoints = [];
      geoPoints = [
        {
          id: "mk1",
          position: new TMap.LatLng(28.695677, 115.92265),
          properties: {
            title: "普赛科技",
            addr: "洪都大道865号",
            tel: "18912374554",
          },
        },
        {
          id: "mk2",
          position: new TMap.LatLng(28.720086, 115.885716),
          properties: {
            title: "南昌市司法局",
            addr: "祥瑞路999号",
            tel: "18912374554",
          },
        },
        {
          id: "mk3",
          position: new TMap.LatLng(28.683927, 115.938221),
          properties: {
            title: "南昌大学",
            addr: "南京东路423号",
            tel: "112312637123",
          },
        },
        {
          id: "mk4",
          position: new TMap.LatLng(28.672878, 115.939138),
          properties: {
            title: "恒茂梦时代广场",
            addr: "上海路3133号",
            tel: "12345345345",
          },
        },
        {
          id: "mk5",
          position: new TMap.LatLng(28.664277, 115.936713),
          properties: {
            title: "东方赛纳",
            addr: "顺外路9898号",
            tel: "417832123123",
          },
        },
      ];

      this.markerCluster = new TMap.MarkerCluster({
        id: "cluster",
        map: this.map,
        enableDefaultStyle: false, // 关闭默认样式
        minimumClusterSize: 2,
        geometries: geoPoints,
        zoomOnClick: true,
        gridSize: 60,
        averageCenter: false,
      });


      let clusterBubbleList = [];
      let markerGeometries = [];

      // 监听聚合簇变化
      let _this = this;
      let markerLayer; // 点标记图层
      this.markerCluster.on("cluster_changed", function (e) {
        // 销毁旧聚合簇生成的覆盖物
        if (clusterBubbleList.length) {
          clusterBubbleList.forEach(function (item) {
            item.destroy();
          });
          clusterBubbleList = [];
        }
        markerGeometries = [];

        // 根据新的聚合簇数组生成新的覆盖物和点标记图层
        var clusters = _this.markerCluster.getClusters();
        clusters.forEach(function (item) {
          if (item.geometries.length > 1) {
            let clusterBubble = new ClusterBubble({
              map: _this.map,
              position: item.center,
              content: item.geometries.length,
            });

            clusterBubble.on("click", () => {
              _this.map.fitBounds(item.bounds);
            });
            clusterBubbleList.push(clusterBubble);
          } else {
            // console.log(item)
            markerGeometries.push({
              id: item.geometries[0].id,
              content: item.geometries[0].content,
              position: item.geometries[0].position,
              properties: item.geometries[0].properties,
            });
          }
        });

        if (markerLayer) {
          // 已创建过点标记图层，直接更新数据
          markerLayer.setGeometries(markerGeometries);
        } else {
          // 创建点标记图层
          markerLayer = new TMap.MultiMarker({
            map: _this.map,
            styles: {
              default: _this.markerStyle.defaultMk,
            },
            geometries: markerGeometries,
          });
          markerLayer.on("click", _this.markerClick);
          
          _this.layerAdd("defaultMarkerLayer", "默认点标记层", markerLayer);
        }
      });
    },
    markerClick(res) {
      var res = res && res.geometry;
      if (res) {
        this.$refs.markerInfo.style.display = "block";
        this.$refs.markerInfo.innerHTML =
          "markerid：" +
          res.id +
          "; 名称：" +
          res.properties.title +
          "; 地址：" +
          res.properties.addr +
          "; 电话：" +
          res.properties.tel +
          "; 坐标：" +
          res.position.lat +
          "," +
          res.position.lng;
      }
    },
    showBound(boundOption) {
      //显示区域边界，默认显示南昌市，边框8，高亮

      //参数预处理
      if (boundOption == null) {
        boundOption = {
          adid: null,
          width: null,
          highlight: null,
        };
      }

      let adid = boundOption.adid;
      let bWidth = boundOption.width;
      let isHighlight = boundOption.highlight;

      if (adid == null) {
        adid = "360100";
      }

      if (bWidth == null || bWidth < 1 || bWidth > 10) {
        bWidth = 8;
      }

      if (isHighlight == null) {
        isHighlight = true;
      }
      // 参数预处理完成

      let paths = [];
      let bound = adbound["ad_" + adid];
      if (bound != null) {
        paths.push(bound);
      }

      if (adid == "all") {
        // 360100	南昌市
        // 360102	东湖区
        // 360103	西湖区
        // 360104	青云谱区
        // 360111	青山湖区
        // 360112	新建区
        // 360113	红谷滩区
        // 360121	南昌县
        // 360123	安义县
        // 360124	进贤县
        paths.push(adbound.ad_360100);
        paths.push(adbound.ad_360102);
        paths.push(adbound.ad_360103);
        paths.push(adbound.ad_360104);
        paths.push(adbound.ad_360111);
        paths.push(adbound.ad_360112);
        paths.push(adbound.ad_360113);
        paths.push(adbound.ad_360121);
        paths.push(adbound.ad_360123);
        paths.push(adbound.ad_360124);
      }

      if (isHighlight) {
        this.map.enableAreaHighlight({
          paths: paths,
          highlightColor: "rgba(0,0,0,0)", // 高亮颜色
          //shadeColor: 'rgba(4,8,14,1)', // 其余阴影部分
        });
      }
      // console.log(paths)

      // MultiPolyline文档地址：https://lbs.qq.com/javascript_gl/doc/multiPolylineOptions.html
      new TMap.MultiPolyline({
        map: this.map,
        styles: {
          polyline: new TMap.PolylineStyle({
            color: "#017cf7", // 线条填充色，
            width: bWidth,
            lineCap: "round",
            enableBloom: true, // 是否启用泛光  注：为true才会有效果
          }),
        },
        geometries: [
          {
            styleId: "polyline", // 样式id
            paths: paths,
          },
        ],
      });
    },
    showAreaColor() {
      // 显示区域范围色块
      var paths = [];
      paths.push(this.createAreaPlane(adbound.ad_360102));
      paths.push(this.createAreaPlane(adbound.ad_360103));
      paths.push(this.createAreaPlane(adbound.ad_360104));
      paths.push(this.createAreaPlane(adbound.ad_360111));
      paths.push(this.createAreaPlane(adbound.ad_360112));
      paths.push(this.createAreaPlane(adbound.ad_360113));
      paths.push(this.createAreaPlane(adbound.ad_360121));
      paths.push(this.createAreaPlane(adbound.ad_360123));
      paths.push(this.createAreaPlane(adbound.ad_360124));
      // console.log(paths);

      let area = new TMap.visualization.Area({
        styles: {
          defaultBg: {
            fillColor: "rgba(56,124,234,0.7)", //设置区域填充颜色
            strokeColor: "#6799EA", //设置区域边线颜色
            strokeWidth: 1,
          },
        },
        selectOptions: {
          //设置拾取配置
          action: "click",
          style: {
            fillColor: "rgba(28,213,255,0.8)", //设置区域填充颜色
            strokeColor: "#fff", //设置区域边线颜色
            strokeWidth: 1, //区域边线宽度
            strokeDashArray: [0, 0], //边线虚线展示方式
          },
        },
      })
        .setData(paths)
        .addTo(this.map);

      area.on("click", function (evt) {
        // console.log(evt);
      });
    },
    createAreaPlane(points) {
      // 私有方法，点位转数组
      let path = [];
      for (let x = 0; x < points.length; x++) {
        path.push(points[x].lat);
        path.push(points[x].lng);
      }

      let item = {};
      item.path = path;
      item.styleId = "defaultBg";
      return item;
    },
    showAreaLabel() {
      // 显示行政区划名称的文本标记
      let geopoints = [];
      for (let x = 0; x < adlabel.length; x++) {
        let point = {};
        point.id = "txt" + adlabel[x].id;
        point.content = adlabel[x].name;
        point.position = new TMap.LatLng(adlabel[x].lat, adlabel[x].lng);
        point.styleId = "label";
        geopoints.push(point);
      }

      let labelLayer = new TMap.MultiLabel({
        id: "adLabels-layer",
        styles: {
          label: this.labelStyle.defaultTxt,
        },
        map: this.map,
        geometries: geopoints,
      });
      this.layerAdd("adLabels-layer", "行政区划名称", labelLayer);
    },
    addLine() {
      var path = [
        new TMap.LatLng(28.674375, 115.903717),
        new TMap.LatLng(28.674375, 115.927593),
        new TMap.LatLng(28.663255, 115.927909),
        new TMap.LatLng(28.658083, 115.924565),
        new TMap.LatLng(28.655272, 115.924333),
        new TMap.LatLng(28.655781, 115.910387),
        new TMap.LatLng(28.636705, 115.913478),
        new TMap.LatLng(28.637428, 115.916975),
        new TMap.LatLng(28.64278, 115.916861),
        new TMap.LatLng(28.647721, 115.921857),
        new TMap.LatLng(28.644501, 115.934595),
        new TMap.LatLng(28.646975, 115.941998),
        new TMap.LatLng(28.645983, 115.947326),
        new TMap.LatLng(28.648468, 115.949429),
        new TMap.LatLng(28.645488, 115.956975),
        new TMap.LatLng(28.652231, 115.960063),
        new TMap.LatLng(28.674375, 115.960222),
      ];

      var polylineLayer = new TMap.MultiPolyline({
        map: this.map, // 绘制到目标地图
        // 折线样式定义
        styles: {
          style_blue: new TMap.PolylineStyle({
            color: "#3777FF", // 线填充色
            width: 8, // 折线宽度
            borderWidth: 2, // 边线宽度
            borderColor: "#FFF", // 边线颜色
            lineCap: "round", // 线端头方式, butt 开口，square 闭口，round 圆润
            showArrow: false, // 是否显示箭头，width>6 才用
            eraseColor: "rgba(190,188,188,1)",
          }),
        },
        geometries: [
          {
            id: "line1",
            styleId: "style_blue",
            paths: path,
          },
        ],
      });
    },
    addSharp() {
      var path = [
        new TMap.LatLng(28.655781, 115.910387),
        new TMap.LatLng(28.636705, 115.913478),
        new TMap.LatLng(28.637428, 115.916975),
        new TMap.LatLng(28.64278, 115.916861),
        new TMap.LatLng(28.647721, 115.921857),
        new TMap.LatLng(28.644501, 115.934595),
        new TMap.LatLng(28.646975, 115.941998),
        new TMap.LatLng(28.645983, 115.947326),
        new TMap.LatLng(28.648468, 115.949429),
        new TMap.LatLng(28.645488, 115.956975),
        new TMap.LatLng(28.652231, 115.960063),
        new TMap.LatLng(28.674375, 115.960222),
      ];

      var polygon = new TMap.MultiPolygon({
        map: this.map, // 绘制到目标地图
        styles: {
          polygon: new TMap.ExtrudablePolygonStyle({
            color: "rgba(0,125,255,0.9)", //面填充色
            showBorder: true, //是否显示拔起面的边线
            extrudeHeight: 30, //多边形拔起高度
            borderColor: "rgba(0,125,255,1)", //边线颜色
          }),
        },
        geometries: [
          {
            id: "polygon1",
            styleId: "polygon",
            paths: path,
          },
        ],
      });
      this.layerAdd("polygon", "多边形层", polygon);
    },
    addTrace() {
      // 增加折线行动轨迹
      var path = [
        new TMap.LatLng(28.674375, 115.903717),
        new TMap.LatLng(28.674375, 115.927593),
        new TMap.LatLng(28.663255, 115.927909),
        new TMap.LatLng(28.658083, 115.924565),
        new TMap.LatLng(28.655272, 115.924333),
        new TMap.LatLng(28.655781, 115.910387),
        new TMap.LatLng(28.636705, 115.913478),
        new TMap.LatLng(28.637428, 115.916975),
        new TMap.LatLng(28.64278, 115.916861),
        new TMap.LatLng(28.647721, 115.921857),
        new TMap.LatLng(28.644501, 115.934595),
        new TMap.LatLng(28.646975, 115.941998),
        new TMap.LatLng(28.645983, 115.947326),
        new TMap.LatLng(28.648468, 115.949429),
        new TMap.LatLng(28.645488, 115.956975),
        new TMap.LatLng(28.652231, 115.960063),
        new TMap.LatLng(28.674375, 115.960222),
      ];

      var polylineLayer = new TMap.MultiPolyline({
        map: this.map, // 绘制到目标地图
        // 折线样式定义
        styles: {
          style_blue: new TMap.PolylineStyle({
            color: "#3777FF", // 线填充色
            width: 4, // 折线宽度
            borderWidth: 2, // 边线宽度
            borderColor: "#FFF", // 边线颜色
            lineCap: "round", // 线端头方式
            eraseColor: "rgba(190,188,188,1)",
          }),
        },
        geometries: [
          {
            id: "erasePath",
            styleId: "style_blue",
            paths: path,
          },
        ],
      });

      var marker = new TMap.MultiMarker({
        map: this.map,
        styles: {
          human: this.markerStyle.defaultMk,
          start: this.markerStyle.startMk,
          end: this.markerStyle.endMk,
        },
        geometries: [
          {
            id: "human",
            styleId: "human",
            position: path[0],
          },
          {
            id: "start",
            styleId: "start",
            position: path[0],
          },
          {
            id: "end",
            styleId: "end",
            position: path[path.length - 1],
          },
        ],
      });

      // 使用marker 移动接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
      marker.moveAlong({
        human: {
          path,
          duration: 10000,
          speed: 800,
        },
      });

      marker.on("moving", (e) => {
        var passedLatLngs = e.human && e.human.passedLatLngs;
        if (passedLatLngs) {
          // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
          polylineLayer.eraseTo(
            "erasePath",
            passedLatLngs.length - 1,
            passedLatLngs[passedLatLngs.length - 1]
          );
        }
      });
    },
    addDialog() {
      // 增加信息窗体
      var infowindow = new TMap.InfoWindow({
        content: "<div><img src='assets/logo.png'><p>Hello World!</p></div>", //在content中直接传入html代码
        position: new TMap.LatLng(28.64278, 115.916861), //设置显示信息窗口的坐标
        map: this.map, //指定信息窗体显示在哪张地图上
        offset: { x: 0, y: -10 },
      });
      infowindow.open();
    },
    showDraw() {
      // 显示多边形绘制功能
      this.drawPolygon = new TMap.MultiPolygon({ map: this.map });
      document.getElementById("toolsDraw").style.display = "block";

      document.getElementById("drawStart").addEventListener("click", (e) => {
        // 开始绘制
        this.drawLayer = new TMap.tools.GeometryEditor({
          map: this.map,
          overlayList: [{ overlay: this.drawPolygon, id: "polygon" }],
          actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW,
          activeOverlayId: "polygon",
          snappable: true,
        });
        // 多边形图层初始化多边形图层，[] 表示空白
        // if(geo==null){
        //   geo=[]
        // }
        this.drawPolygon.setGeometries([]);
      });

      
      document.getElementById("drawEdit").addEventListener("click", (e) => {
        // 开始编辑模式
        this.drawLayer.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
        this.drawLayer.setSelectable(true);
      });

      document.getElementById("drawPoint").addEventListener("click", (e) => {
        let areas=[]; // 二维数组，可多个区域
        // 改为不可编辑模式
        this.drawLayer.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
        this.drawLayer.setSelectable(false);
        if(this.drawPolygon.geometries!=null && this.drawPolygon.geometries.length>0){
          for(let r=0; r<this.drawPolygon.geometries.length; r++){
            let points=[];
            for(let x=0; x<this.drawPolygon.geometries[r].paths.length; x++){
              let item=this.drawPolygon.geometries[r].paths[x];
              points.push({lat: item.lat, lng: item.lng});
            }
            areas.push(points)
          }
          console.log(areas);
          console.log(this.drawPolygon.geometries);
          // console.log(this.drawPolygon.geometries[0].paths);
        }else{
          console.log("没有绘制图形");
        }
      });
    },
  },
};
</script>
<style>
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.clusterBubble {
  border-radius: 50%;
  color: #fff;
  font-weight: 1500;
  font-size: 24px;
  text-align: center;
  opacity: 0.88;
  /* background-color: #f78c00; */
  /* border: 1px #fffb00 solid; */
  background-image: radial-gradient(#f79c00 0%, #ffe0aa 200%);
  box-shadow: 0px 3px 3px 0px rgba(255, 233, 32, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
}

#markerInfo {
  display: none;
  position: absolute;
  left: 30px;
  top: 90px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  z-index: 9999;
}

#toolsDraw {
  position: absolute;
  top: 10px;
  left: 100px;
  margin: auto;
  width: 200px;
  z-index: 1001;
  display: none;
}

.toolItem {
  width: 50px;
  height: 24px;
  float: left;
  margin: 1px;
  padding: 4px;
  background: #ffffff;
  border-radius: 3px;
  text-align: center;
  font-size: 16px;
}

#layerChoose{
  position: absolute;
  background: rgba(69,122,230,0.54);
  color:#ffffff;
  font-size:14px;
  border-radius: 5px;
  text-align:left;
  top: 600px;
  left: 50px;
  padding:10px 20px 10px 15px;
  z-index: 1300;
  display: none;
}

#layerChoose li{
  list-style-type: none;
}
</style>